import React, { useState, useEffect } from 'react'
import './index.less'
import { Play } from '@react-vant/icons';
import { history } from 'umi'
import { Tabs } from 'react-vant'
import axios from 'axios';

export default function Index() {

  const [list, setlist] = useState({})

  useEffect(() => {
    getlist()
  }, [])
  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/zgh_jf_look')
    console.log(data.catelist[0]);
    setlist(data.catelist[0])
  }

  return (
    <div className='detail'>

      {/* 头部 */}
      <div className='top'>

        <div>
          <Play rotate={180} className='top_an' onClick={() => { history.push('/jifen') }} />
          积分明细
        </div>

      </div>

      {/* 内容区域 */}
      <div className="con">
        <div className="demo-tabs">
          <Tabs defaultActive={0} lineWidth='50%' color='#56A138'>

            <Tabs.TabPane title='积分收入'>
              {
                list.children && list.children.map((ele => {
                  if (ele.cate == 1) {
                    return <div className='con_box' key={ele._id}>
                      <p>签到</p>
                      <p>{ele.date.replace('T', '  ').replace('Z', ' ').split('.')[0]}</p>
                      <div className='con_box_txt'>{ele.title}</div>
                    </div>
                  }
                }))
              }
            </Tabs.TabPane>

            <Tabs.TabPane title='积分支出'>
              {
                list.children && list.children.map((ele => {
                  if (ele.cate == 2) {
                    return <div className='con_box' key={ele._id}>
                      <p>兑换优惠劵</p>
                      <p>{ele.date.replace('T', '  ').replace('Z', ' ').split('.')[0]}</p>
                      <div className='con_box_txt'>{ele.title}</div>
                    </div>
                  }
                }))
              }
            </Tabs.TabPane>

          </Tabs>
        </div>
      </div>

    </div>
  )
}
